<template>
  <a-card title="评论管理" :bordered="false">
    <template #extra>
      <a-space>
        <a-select v-model:value="status" placeholder="状态" allow-clear style="width: 120px" @change="onFilter">
          <a-select-option :value="0">待审核</a-select-option>
          <a-select-option :value="1">通过</a-select-option>
          <a-select-option :value="2">拒绝</a-select-option>
        </a-select>
        <a-input-number v-model:value="articleId" :min="1" placeholder="文章ID" @change="onFilter" />
      </a-space>
    </template>

    <a-table :data-source="list" :loading="loading" :pagination="false" row-key="id" :row-selection="rowSelection">
      <a-table-column title="ID" dataIndex="id" width="80" />
      <a-table-column title="文章ID" dataIndex="articleId" width="100" />
      <a-table-column title="昵称" dataIndex="nickname" width="120" />
      <a-table-column title="内容" dataIndex="content" />
      <a-table-column title="状态" key="status" width="120">
        <template #default="{ record }">
          <a-tag :color="record.status === 1 ? 'green' : (record.status === 2 ? 'red' : 'gold')">
            {{ record.status === 1 ? '通过' : (record.status === 2 ? '拒绝' : '待审核') }}
          </a-tag>
        </template>
      </a-table-column>
      <a-table-column title="时间" dataIndex="createTime" width="180" />
      <a-table-column title="操作" key="actions" width="260">
        <template #default="{ record }">
          <a-space>
            <a v-if="hasPerm('comment:manage') && record.status !== 1" @click="approve(record.id)">通过</a>
            <a v-if="hasPerm('comment:manage') && record.status !== 2" @click="reject(record.id)">拒绝</a>
            <a-popconfirm v-if="hasPerm('comment:manage')" title="确定删除该评论？" @confirm="() => onDelete(record.id)">
              <a-button type="link" danger>删除</a-button>
            </a-popconfirm>
            <a-dropdown v-if="hasPerm('comment:manage') && selectedRowKeys.length">
              <a class="ant-dropdown-link" @click.prevent>批量操作</a>
              <template #overlay>
                <a-menu>
                  <a-menu-item @click="batchApprove">批量通过</a-menu-item>
                  <a-menu-item @click="batchReject">批量拒绝</a-menu-item>
                  <a-menu-item @click="batchDelete">批量删除</a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </a-space>
        </template>
      </a-table-column>
    </a-table>

    <div style="margin-top: 16px; text-align: right">
      <a-pagination :current="pageNo" :page-size="pageSize" :total="total" @change="onPageChange" />
    </div>
  </a-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { usePageQuery } from '@/composables/usePageQuery'
import { adminPageComments, adminApproveComment, adminRejectComment, adminDeleteComment } from '@/api/admin'
import type { CommentAdminVO } from '@/api/admin'
import { usePerm } from '@/composables/usePerm'

const loading = ref(false)
const list = ref<CommentAdminVO[]>([])
const total = ref(0)
const { pageNo, pageSize, pushQuery } = usePageQuery({ pageNo: 1, pageSize: 10 })
const status = ref<number | undefined>(Number((usePageQuery as any).route?.query?.s) || undefined)
const articleId = ref<number | undefined>(Number((usePageQuery as any).route?.query?.a) || undefined)
const selectedRowKeys = ref<number[]>([])
const rowSelection = {
  selectedRowKeys: selectedRowKeys.value,
  onChange: (keys: number[]) => { selectedRowKeys.value = keys }
}
const { hasPerm } = usePerm()

async function load() {
  loading.value = true
  try {
    const resp = await adminPageComments({ pageNo: pageNo.value, pageSize: pageSize.value, status: status.value, articleId: articleId.value })
    list.value = resp.data.records
    total.value = resp.data.total
  } finally { loading.value = false }
}

function onFilter() {
  pageNo.value = 1
  // 将自定义筛选条件写入 URL query（s=状态，a=文章ID）
  const router = (usePageQuery as any).router || null
  const route = (usePageQuery as any).route || null
  if (router && route) {
    router.replace({ name: route.name, query: { ...(route.query || {}), s: status.value, a: articleId.value, p: pageNo.value, ps: pageSize.value } })
  }
  load()
}

function onPageChange(p: number) { pageNo.value = p; pushQuery(); load() }

async function approve(id: number) { await adminApproveComment(id); await load() }
async function reject(id: number) { await adminRejectComment(id); await load() }
async function onDelete(id: number) { await adminDeleteComment(id); await load() }

async function batchApprove() {
  for (const id of selectedRowKeys.value) await adminApproveComment(id)
  selectedRowKeys.value = []
  await load()
}
async function batchReject() {
  for (const id of selectedRowKeys.value) await adminRejectComment(id)
  selectedRowKeys.value = []
  await load()
}
async function batchDelete() {
  for (const id of selectedRowKeys.value) await adminDeleteComment(id)
  selectedRowKeys.value = []
  await load()
}

onMounted(load)
</script>

<style scoped>
</style>


